window.addEventListener("load", function () {
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];

	// 功能一，动态渲染API分类区
	// 1.获取后台数据进行遍历
	let html = "";
	apiTypeData.forEach(function (v, i) {
		if (i === 0) {
			html += `<li class='active' title='${v.keyword}'>${v.name}</li>`;
		} else if (v.isnew) {
			html += `<li class='fontwtb' title='${v.keyword}'>${v.name}</li>`;
		} else {
			// 2.遍历时拼接HTML结构
			html += `<li title='${v.keyword}'>${v.name}</li>`;
		}
	});
	// 3.将拼接的HTML结构放入对应位置
	$(".apiCateList").innerHTML = html;

	// 功能二：API分类后增加激活样式
	// 获取相关节点
	$(".apiCateList li");
	// 件2.给li绑定事
	$(".apiCateList li").forEach(function (v) {
		v.addEventListener("click", function () {
			// 3.排他思想，清除其他激活的li
			$(".apiCateList li").forEach(function (item) {
				item.classList.remove("active");

				console.log(11111);
			});
			// 4.再给当前被点击的对象增加激活样式
			this.classList.add("active");

			// 功能三，点击API分类区域的标签，联动下方的搜素框
			// 将 this 的textContent赋值给strong
			$("#apiall p span").textContent = this.textContent;
			// 2.将this的title赋值给搜索框的value
			$("#apiall input").value = this.title;
		});
	});
	// /API列表区域 模拟服务器返回的数据
	const listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];

	// 功能四：卡片区动态渲染
	// 1.获取后台数据，进行遍历
	let cardHtml = "";
	listDataArr.forEach(function (v) {
		// 2.遍历时拼接为HTML结构
		cardHtml += `
        <li class="flex-cum-c-c flex-wrap po-re">
		<img src="../images/${v.img}" alt="" />
		<p class="apititle">${v.name}</p>
		<p class=${v.isSpecial ? "clor-red" : "clor-green"}>${v.price}</p>
         ${v.isSpecial ? '<p class="po-ab apiname">企业专用</p>' : ""}
		<button class="clor-white bg-blue bord-blue">申请数据</button>
		</li>	
        `;
	});
	// 3.将HTML结构放入指定位置
	$("#apicontent>ul").innerHTML = cardHtml;

	// 功能五:点击分页器页码时，增加激活样式
	// 获取相关节点
	// 给页码绑定事件
	$("#page ul li").forEach(function (v) {
		v.addEventListener("click", function () {
			// 3.点击后先移出全部按钮激活样式（排他思想）
			$("#page ul li").forEach(function (item) {
				item.classList.remove("active");
			});
			// 4.再给自己增加激活样式
			this.classList.add("active");
		});
	});

	// 功能五，点击申请数据关闭蒙层
	// 1.获取相关节点
	$("#mask");
	$("#apicontent ul");
	// 2.给公共的祖元素apicontent ul 绑定点击事件，事件委派
	$("#apicontent ul").addEventListener("click", function (event) {
		// 3.根据事件源的localName属性进行区分，button标签
		if (event.target.localName === "button") {
			// 弹出蒙层
			$("#mask").style.display = "block";
			//  阻止默认事件跳转（点击按钮画面闪一下的情况）
			event.preventDefault();
			// 让滚动条消失
			document.body.style.overflow = "hidden";
		}
	});
	// 点击蒙层关闭蒙层;
	$("#mask").addEventListener("click", function () {
		this.style.display = "none";
		document.body.style.overflow = "auto";
	});
	// 6.阻止登录框事件传播
	$(".login-right").addEventListener("click", function (e) {
		e.stopPropagation();
	});

	// 蒙层二维码界面切换
	// 获取相关节点
	// $('.login-right>div')
	// $('.logpwd')
	// $('.qr-code')
	// $(".login-right>p a");
	console.log($(".login-right>div")[1]);
	// 绑定点击事件
	$(".login-right .log a").forEach(function (v, i) {
		v.addEventListener("click", function () {
			// 3.点击后先移出全部按钮激活样式（排他思想）
			$(".login-right .log a").forEach(function (item, i) {
				item.classList.remove("active");
				// console.log(item);
				// console.log(i);
				// console.log($(".login-right>div")[i]);
				$(".login-right>div")[i].style.display = "none";
			});

			// 4.再给自己增加激活样式
			$(".login-right>div")[i].style.display = "block";
			this.classList.add("active");
		});
	});

	console.log(11111);
});
